
<template>
  <div class="rich-text" :style="containerStyle">
    <!-- 空状态 -->
    <div v-if="!data.content || !data.content.length" class="empty-state">
      <el-empty description="暂无富文本内容" />
    </div>

    <!-- 富文本内容 -->
    <div 
      v-else 
      class="rich-content"
      :style="contentStyle"
      v-html="data.content"
    />

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 计算容器样式
const containerStyle = computed(() => {
  return {
    backgroundColor: props.data.backgroundColor || '#ffffff',
    marginTop: `${props.styles.marginTop || 0}px`,
    marginBottom: `${props.styles.marginBottom || 0}px`,
    marginLeft: `${props.styles.marginLeft || 0}px`,
    marginRight: `${props.styles.marginRight || 0}px`,
    padding: `${props.data.padding || 10}px`,
    borderRadius: `${props.data.borderRadius || 0}px`
  }
})

// 计算内容样式
const contentStyle = computed(() => {
  return {
    fontSize: `${props.data.fontSize || 14}px`,
    color: props.data.textColor || '#333333',
    lineHeight: props.data.lineHeight || 1.6,
    textAlign: props.data.textAlign || 'left'
  }
})
</script>

<style lang="scss" scoped>
.rich-text {
  width: 100%;
  box-sizing: border-box;
  position: relative;

  .empty-state {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rich-content {
    width: 100%;

    // 全局样式
    :deep(img) {
      max-width: 100% !important;
      display: block;
    }

    :deep(pre) {
      white-space: break-spaces;
    }

    :deep(p) {
      word-break: break-all;
    }
  }
}
</style>
